<template>
  <div>
    <Row type="flex" class="common_window_top" align="middle" justify="start">
      <Col span="4">
        <div>
            <span class="title">
              <Icon type="ios-apps" size="45"/>菜单管理</span>
        </div>
      </Col>
      <Col span="20">
        <div style="float: right;padding-right: 20px">
          <Form label-position="right" :label-width="75" inline>
            <Button type="info" @click="refreshMenu" style="margin-right: 10px;">查询</Button>
            <Button type="success" @click="addButton">新增</Button>
          </Form>
        </div>
      </Col>
    </Row>
    <br>
    <Row class="common_window_down" :gutter="5" >
      <Col span="5" class="left_tree" style="border: 1px solid #DCDEE2;padding-left: 0px;padding-right: 0px">
        <Row >
          <Col span="24">
            <h2>菜单列表</h2>
          </Col>
        </Row>
        <Row>
          <Col span="24">
            <div style="padding: 0px 10px 0px 10px;">
              <Tree :data="menuTrees" @on-select-change="treeMenuClick"></Tree>
            </div>
          </Col>
        </Row>
      </Col>
      <Col span="19" class="right_content">
        <Row justify="center" type="flex">
          <Col span="24">
            <h2>子菜单列表</h2>
          </Col>
        </Row>
        <Row>
          <Col span="24">
            <Table border :data="menuList" :columns="menuColumn"></Table>
          </Col>
        </Row>
      </Col>
    </Row>

    <Modal v-model="addOrUpdateMenu.isShow" :title="addOrUpdateMenu.parameters.id ? '修改菜单' : '新增菜单'" :mask-closable="false">
      <Form ref="formValidate" :model="addOrUpdateMenu.parameters" :rules="addOrUpdateMenu.ruleValidate" label-position="right" :label-width="75" inline>
        <Row :gutter="3">
          <Col span="12">
            <FormItem label="父级菜单:" style="width: 100%;" prop="parentName">
              <Input v-model="addOrUpdateMenu.parameters.parentName" :readonly="true" type="text" placeholder="默认顶级" />
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="菜单类型:" prop="menuType" style="width: 100%;">
              <Select v-model="addOrUpdateMenu.parameters.menuType">
                <Option v-for="(item,index) in dictArray.menuType" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="3">
          <Col span="12">
            <FormItem label="菜单名称:" style="width: 100%;" prop="menuName">
              <Input v-model="addOrUpdateMenu.parameters.menuName" type="text" placeholder="请输入..."/>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="图标:" style="width: 100%;" prop="menuIcon">
              <Input v-model="addOrUpdateMenu.parameters.menuIcon" type="text" placeholder="请输入..." />
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="3">
          <Col span="12">
            <FormItem label="链接:" style="width: 100%;" prop="menuHref">
              <Input v-model="addOrUpdateMenu.parameters.menuHref" type="text" placeholder="请输入..."/>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="权限标识:" style="width: 100%;" prop="permission">
              <Input v-model="addOrUpdateMenu.parameters.permission" type="text" placeholder="请输入..." />
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="3">
          <Col span="12">
            <FormItem label="排序:" prop="treeSort" style="width: 100%;">
              <InputNumber :max="100000" :min="1" :precision="0" v-model="addOrUpdateMenu.parameters.treeSort"></InputNumber>
            </FormItem>
          </Col>
          <Col span="12">
          </Col>
        </Row>
      </Form>
      <div slot="footer">
        <Button type="primary" size="large" :loading="addOrUpdateMenu.loading" @click="sendMenu">提交</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import {listMenu,treeListMenu,addMenu,updateMenu,deleteMenu} from "../../../api/sys/system/sysMenu";
  import {mapState} from "vuex";
  export default {
    name : 'sysSystemMenu',
    computed : {
      ...mapState(['dictObject','dictArray'])
    },
    data () {
      return {
        menuTrees : [],
        menuList : [],
        menuColumn : [
          {title : '菜单名称',key : 'menuName',align : 'center',tooltip : true},
          {title : '菜单类型',key : 'menuType',align : 'center',tooltip : true,render : (h,parame)=>{return h('span',this.dictObject.menuType[parame.row.menuType])}},
          {title : '链接',key : 'menuHref',align : 'center',tooltip : true},
          {title : '权限标示',key : 'permission',align : 'center',tooltip : true},
          {title : '图标',key : 'menuIcon',align : 'center',tooltip : true,render : (h,parame)=>{
              if(parame.row.menuIcon){
                return h('Icon',{props : {type : parame.row.menuIcon}});
              }
            }},
          {title : '操作',align : 'center',minWidth : 290,maxWidth : 290,render:(h,parame)=>{
              var buttons = [];
              buttons.push(h('Button',{
                props: {
                  type: 'info',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on : {
                  click : ()=>{
                    this.$refs['formValidate'].resetFields();
                    this.addOrUpdateMenu.parameters.parentId = parame.row.id;
                    this.addOrUpdateMenu.parameters.parentName = parame.row.menuName;
                    this.addOrUpdateMenu.parameters.id = null;
                    this.addOrUpdateMenu.isShow = true;
                  }
                }
              },'添加下级'));
              buttons.push(h('Button',{
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on : {
                  click : ()=>{
                    var parentName = '';
                    if(parame.row.treeNames){
                      var treeNames = parame.row.treeNames.split(',')
                      parentName = treeNames[treeNames.length -1];
                    }
                    this.addOrUpdateMenu.parameters.id = parame.row.id;
                    this.addOrUpdateMenu.parameters.parentName = parentName;
                    this.addOrUpdateMenu.parameters.parentId = parame.row.parentId;
                    this.addOrUpdateMenu.parameters.menuName = parame.row.menuName;
                    this.addOrUpdateMenu.parameters.menuType = parame.row.menuType;
                    this.addOrUpdateMenu.parameters.menuHref = parame.row.menuHref;
                    this.addOrUpdateMenu.parameters.menuIcon = parame.row.menuIcon;
                    this.addOrUpdateMenu.parameters.permission = parame.row.permission;
                    this.addOrUpdateMenu.parameters.treeSort = parame.row.treeSort;
                    this.addOrUpdateMenu.isShow = true;
                  }
                }
              },'修改'));
              buttons.push(h('Button',{
                props: {
                  type: 'error',
                  size: 'small'
                },
                on : {
                  click : ()=>{
                    this.deleteMenu(parame.row.id);
                  }
                }
              },'删除'));
              return h("div",{},buttons);
            }},
        ],
        parameters : {
          menuName : null,
          menuType : null,
        },
        contentparame : {
          parentId : null,
        },
        addOrUpdateMenu : {
          isShow :false,
          loging : false,
          parameters : {
            id : null,
            parentName : '',
            parentId : '0',
            menuName : null,
            menuType : '1',
            menuHref : null,
            menuTarget : null,
            menuIcon : null,
            permission : null,
            isShow : '1',
            treeSort : 1
          },
          ruleValidate : {
            menuName : { required: true, message: '必填！', trigger: 'change' },
            menuType : { required: true, message: '必填！', trigger: 'change' },
            sysCode : { required: true, message: '必填！', trigger: 'change' },
          }
        }
      }
    },
    mounted(){
      this.refreshMenu();
    },
    methods : {
      refreshMenu(){
        this.contentparame.parentId = null;
        this.contentparame.sysCode = this.sysCode;
        this.parameters.sysCode = this.sysCode;
        this.getMenuList();
        this.getTreeListMenu();
      },
      getMenuList(){
        listMenu(this.contentparame).then(result =>{
          this.menuList = result.data;
        });
      },
      getTreeListMenu(){
        treeListMenu(this.parameters).then(result =>{
          this.menuTrees = result.data;
        });
      },
      treeMenuClick(row){
        var obj = row[0];
        this.contentparame.parentId = obj.id;
        this.getMenuList();
      },
      /**
       *
       * 新增按钮
       */
      addButton(){
        this.$refs['formValidate'].resetFields();
        this.addOrUpdateMenu.parameters.parentId = '0';
        this.addOrUpdateMenu.parameters.id = null;
        this.addOrUpdateMenu.isShow = true;
      },
      sendMenu(){
        this.$refs['formValidate'].validate(valid=>{
          if(valid){
            this.addOrUpdateMenu.loading = true;
            if(this.addOrUpdateMenu.parameters.id){
              //修改
              updateMenu(this.addOrUpdateMenu.parameters.id, this.addOrUpdateMenu.parameters).then(result =>{
                this.sendMenuSuccess(false);
              },error =>{
                this.addOrUpdateMenu.loading = false;
              });
            }else{
              //新增
              addMenu(this.addOrUpdateMenu.parameters).then(result =>{
                this.sendMenuSuccess(true);
              },error =>{
                this.addOrUpdateMenu.loading = false;
              });
            }
          }
        })

      },
      sendMenuSuccess(isAdd){
        if(isAdd){
          this.$Message.success('新增成功！');
        }else{
          this.$Message.success('修改成功！');
        }
        this.addOrUpdateMenu.loading = false;
        this.addOrUpdateMenu.isShow = false;
        //重新查询树形结构与菜单
        this.getMenuList();
        this.getTreeListMenu();
      },
      deleteMenu(id){
        deleteMenu(id).then(result =>{
          this.$Message.success("删除成功！");
          //重新查询树形结构与菜单
          this.getMenuList();
          this.getTreeListMenu();
        });
      },

    }
  }
</script>

<style scoped>
</style>
